<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<u-alert :center="true" :title="`于 ${info.task.deadline} 截至`" type="warning"></u-alert>
			<view class="detail ">
				<u-cell-group :customStyle="{backgroundColor:'white'}" title="基本信息">
					<u-cell title="状态" :value="info.status" :titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="优先级" :value="info.task.priority"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="分配时间" :value="info.assignedDate"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="任务进度" :value="info.progressNotes"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="创建时间" :value="info.task.createdDate"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
				</u-cell-group>
				<u-cell-group customClass="mt-30" :customStyle="{backgroundColor:'white'}" title="任务信息">
					<u-cell title="任务标题" :value="info.task.title" :titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="任务描述" :value="info.task.description"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="工作类型" :value="info.task.dutyType"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
					<u-cell title="任务类型" :value="info.task.taskType"
						:titleStyle="{color:'#999',fontSize:'14px'}"></u-cell>
				</u-cell-group>
				<u-cell-group customClass="mt-30" :customStyle="{backgroundColor:'white'}" title="任务进度" :border="false">
					<view class="p-30" inactiveIcon="arrow-right" style="backgroundColor:white">
						<u-steps direction="column" v-for="item in info.processes" dot>
							<u-steps-item :title="item.outcome" :desc="item.description">
							</u-steps-item>
						</u-steps>
					</view>
				</u-cell-group>
				<view class="p-30">
					<u-button color="var(--m-color)" text="添加进度" @click="formShow = true"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="formShow" @close="formShow = false">
			<view class="p-30">
				<u--form labelPosition="top" labelWidth="200" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="结果" prop="applicantName" ref="applicantName">
						<u--input v-model="form.applicantName" border="surround"></u--input>
					</u-form-item>
					<u-form-item label="描述" prop="description" ref="description">
						<u--textarea v-model="form.description" placeholder="请输入描述"></u--textarea>
					</u-form-item>

					<u-form-item label="附件" prop="files" ref="files">
						<view>
							<u-button :customStyle="{width:'80px',margin:0}" type="primary" size="small" text="点击上传"
								@click="uploadDoc"></u-button>
							<view class="files-list mt-20" v-if="form.files">
								<view class="files-item " v-for="(item,index) in form.files">
									<view class="url line-1">
										<view>{{item}}</view>
									</view>
									<view class="action">
										<u-button type="error" size="mini" text="删"
											@click="deleteAttachments(index)"></u-button>
									</view>
								</view>
							</view>
						</view>
					</u-form-item>
				</u--form>
				<view class="mt-30">
					<u-button color="var(--m-color)" text="提交" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getTaskDetail,
		addTaskProgress,
		uploadFile
	} from '@/config/api.js'

	export default {
		data() {
			return {
				pageLoading: true,
				options: {},
				info: {},
				formShow: false,
				form: {
					description: '',
					outcome: '',
					files: [],
				},
				rules: {
					'outcome': {
						type: 'string',
						required: true,
						message: '请输入结果',
						trigger: ['blur', 'change']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请填写描述',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData();
		},
		onReady() {

		},
		methods: {
			async getPageData(cb) {
				let res = await getTaskDetail(this.options.id);
				this.info = res;
				typeof cb == 'function' && cb();
			},
			deleteAttachments(index) {
				if (index >= 0 && index < this.form.files.length) {
					this.form.files.splice(index, 1);
				}
			},
			uploadDoc() {
				uni.chooseFile({
					count: 1,
					type: 'all',
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						});

						const tempFilePaths = res.tempFilePaths;
						// 上传文件
						uploadFile({
							filePath: tempFilePaths[0],
							name: 'file'
						}).then(res1 => {
							this.form.files.push(res1.url);
							uni.hideLoading();
						}).catch(res => {
							uni.showToast({
								title: ret || '操作失败',
								icon: 'none'
							})
							uni.hideLoading();
						})
					},
					fail: (err) => {
						uni.showToast({
							title: err || '操作失败',
							icon: 'none'
						})
						uni.hideLoading();
					},
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					addTaskProgress(this.form).then(res1 => {
						//刷新页面
						this.formShow = false;
						this.getPageData()
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.custom-cell-group {
		.u-cell__title-text {
			color: #999999 !important;
		}
	}
</style>